<template>
  <div
    class="relative flex items-center justify-center min-h-screen px-5 py-5 min-w-screen loginMain"
  >
    <div class="text-[#fff] text-2xl absolute top-5 left-5">
      {{ $t("游戏商户后台") }}
    </div>
    <div :id="`test`"></div>
    <div
      class="w-full overflow-hidden text-gray-500 bg-gray-100 shadow-xl rounded-3xl"
      style="max-width: 400px"
    >
      <div class="flex w-full">
        <div class="w-full px-5 py-20 md:px-10" v-if="type === 1">
          <div class="flex items-center justify-center mb-6">
            <div
              class="w-[50px] h-[50px] rounded-lg shadow-lg shadow-slate-500 flex justify-center items-center"
            >
              <img src="@/assets/images/image.png" alt="" width="20" />
            </div>
          </div>
          <div class="mb-10 text-center">
            <h1 class="text-xl font-medium text-gray-900">
              {{ $t("管理后台登录") }}
            </h1>
          </div>
          <LoginForm />
          <div class="mt-10">
            <Language />
          </div>
          <!-- <div class="flex items-center justify-end mt-4">
            <div
              class="cursor-pointer text-[#333] text-sm"
              @click="handlePassword(2)"
            >
              {{ $t("忘记密码") }}
            </div>
          </div> -->
        </div>
        <div class="w-full px-5 pt-10 pb-20 md:px-10" v-else>
          <Forgetpassword @handleReturn="handlePassword(1)" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Language from "./components/Language.vue";
import LoginForm from "./components/LoginForm.vue";
import Forgetpassword from "./components/ForgetPassword.vue";
const type = ref(1);
const handlePassword = (item) => {
  type.value = item;
};
</script>
<style scoped>
.loginMain {
  background-color: rgba(40, 61, 88, 1);
}
</style>
